<template>
  <ul class="dragdrop-edit">
    <li>
      <el-tooltip effect="dark" content="删除" placement="top">
        <el-button size="mini" icon="el-icon-delete" @click.stop="handleDelete()"></el-button>
      </el-tooltip>
    </li>
    <li>
      <el-tooltip effect="dark" content="设置" placement="top">
        <el-button size="mini" icon="el-icon-setting" @click.stop="handleSetting()"></el-button>
      </el-tooltip>
    </li>
    <li>
      <el-tooltip effect="dark" content="锁定" placement="top">
        <el-button size="mini" :icon="lockIco" @click.stop="handleLock()"></el-button>
      </el-tooltip>
    </li>
  </ul>
</template>
<script type="text/javascript">
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers('cloud')
export default {
  components: {
    //empty
  },
  props: {
    value: [Array, Object, String, Number]
  },
  data() {
    return {
      lockIco: "el-icon-unlock",
      lockVal: false,
      right: 0,
      top: 0,
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  created() {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.handleSetting();
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapMutations(['click_layer', 'set_attributes', 'set_pool']),
    /**
     * 锁定图层
     * @return {[type]} [description]
     */
    handleLock() {
      if (this.lockVal) {
        this.lockVal = false;
        this.lockIco = 'el-icon-unlock'
      } else {
        this.lockVal = true;
        this.lockIco = 'el-icon-lock'
      }
      event.returnValue = false;
    },
    /**
     * 属性设置
     * @return {[type]} [description]
     */
    handleSetting() {
      if (this.value) {
        //获取对应组件
        let config = this.value;
        //重置属性
        let attribute = config.attributes;
        //循环设置数据
        for (let i in attribute) {
          attribute[i].data = config.data
        }
        //数据操作
        this.set_attributes(attribute);
      }
    },
    handleDelete() {
      if (this.value && this.value.name !== 'body') {
        console.log("循环删除",this);
        //1.删除数据
        // let parent = this.$parent.$parent.value.slot;
        // console.log("parent",parent);
        // let index = this.value.location
        // parent.splice(index, 1);
      }
    }
  }
}

</script>
<style type="text/css" lang="scss">
.dragdrop-edit {
  position: absolute;
  right: 0;
  top: -22px;
  height: 22px;
  width: 140px;
  display: block;
  z-index: 999;

  li {
    padding: 0 2px;
    height: 22px;
    float: right;
    list-style-type: none;
    background-color: #358be0;
  }

  .el-button--mini,
  .el-button--mini.is-round {
    padding: 3px;
    font-size: 12px;
    background: none;
    border: none;
    color: #fff;
  }
}

</style>
